<template>
	<div>
	  <div class="detail-wrapper">
	    <div class="detali-ifo">
	    	<div class="ifo-line-one">
	    		<div class="name ellipsis-2">
	    			<i class="buy-title-icon"></i>
	    			<span class="tittle">{{DetailBuy.kind_name}}{{DetailBuy.title}}</span>
	    		</div>
	    		<div class="share">
	    			<i class="share-icon"></i>
	    			<span>分享</span>
	    		</div>
	    	</div>
	    	<div class="ifo-line-two">
	    		<div class="price">
	    			<span class="p-bt">价格:</span>
	    			<label v-if="DetailBuy.price">
	    				<big>{{DetailBuy.price}}</big>
		    			<span class="unit-price">元/斤</span>
	    			</label>
	    			<label v-else>
	    				<span class="mianyi">面议</span>
		    		</label>
	    		</div>
	    		<div class="size ellipsis">
	    			<span>规格:</span>
	    			<label v-if="DetailBuy.size_unit_name">{{DetailBuy.size_min}}-{{DetailBuy.size_max}}{{DetailBuy.size_unit_name}}</label>
	    			<label v-else>不限</label>
	    		</div>
	    	</div>
	    	<div class="ifo-line-three">
	    		<div class="foods-address ellipsis">
	    			<label>
	    			<i class="address-icon"></i>
						<span>{{DetailBuy.province_name}}</span>
						<span>{{DetailBuy.city_name}}</span>
					</label>
					<label class="wl" v-show="DetailBuy.logistics===1">
						<i class="wl-car"></i>
						<span>物流</span>
					</label>
	    		</div>
	    		<div class="stone ellipsis">
	    			<span>求购:</span>
	    			<label>{{DetailBuy.stock}}斤</label>
	    		</div>
	    	</div>
	    	<div class="ifo-line-four">
	    		<div class="ifo-report ">
	    			<label>
	    				<i class="report-icon"></i>
	    				<span>举报</span>
	    			</label>
	    			<label class="report-done">
	    				<i class="report-icon-done"></i>
	    				<span>已举报</span>
	    			</label>
	    		</div>
	    		<div class="read-time">{{DetailBuy.pv}}次查看</div>
	    		<div class="update-time">{{DetailBuy.updated_view}}</div>
	    	</div>
	    </div>
	    <div class="detali-foods-seller" v-if="DetailBuy.avatar_view">
	    	<div class="seller-icon" v-bind:style="{backgroundImage: 'url(' + DetailBuy.avatar_view+'?imageView2/2/w/200)'}"></div>
	    	<div class="seller-msg">
	    		<span class="name ellipsis">{{DetailBuy.contact_name}}</span>
	    	</div>
	    	<div class="seller-shop">
	    		<a :href="'#/trade/shop/' + DetailBuy.id ">
		    		<span class="text">进店铺</span>
		    		<i class="enter-icon"></i>
	    		</a>
	    	</div>
	    </div>
	    <div class="detail-tab">
	    	<tab>
		      <tab-item selected @on-item-click="onItemClick">图文详情</tab-item>
		      <tab-item @on-item-click="onItemClick">本店其他供应</tab-item>
		    </tab>
		    <div class="tab-item" v-show="nowIndex===0">
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">信息编号</div>
		    			<div class="msg-right">{{DetailBuy.sn}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">求购品种</div>
		    			<div class="msg-right">{{DetailBuy.kind_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">求购数量</div>
		    			<div class="msg-right">{{DetailBuy.stock}}斤</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">规格</div>
		    			<div class="msg-right">{{DetailBuy.size_min}}-{{DetailBuy.size_max}}{{DetailBuy.size_unit_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">价格</div>
		    			<div class="msg-right">
		    				<label v-if="DetailBuy.price">{{DetailBuy.price}}元/斤</label>
			    			<label v-else>
			    				<span>面议</span>
				    		</label>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">供货地址</div>
		    			<div class="msg-right">{{DetailBuy.province_name}}{{DetailBuy.city_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b" v-if="DetailBuy.desc_tag.length || DetailBuy.desc">
		    			<div class="msg-left">补充说明</div>
		    			<div class="msg-right">
  							<span class="need-bq" v-for="tab in DetailBuy.desc_tag">{{tab}}</span>
  							<label>{{DetailBuy.desc}}</label>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="detail-list-remand">
		    		<div class="column vux-1px-b">
		    			<i class="column-icon"></i>
		    			<span>为你推荐</span>
		    		</div>
		    		<div class="remand-list">
		    		
		    		</div>
		    	</div>
		    </div>
	    	<div class="tab-item" v-show="nowIndex===1">
	    		
	    	</div>
	    </div>
	  </div>
	</div>  
</template>

<script>
	import { Tab, TabItem } from 'vux'
export default {
	data () {
    return {
       nowIndex:0,
       DetailBuy: [],
       demandList:[],
       shopList:[],
       demandloading:true,
       demandStatus:"loading",
       shopListLoading:true,
       shopListStatus:"loading"
    }
  },
  methods: {
		onItemClick (index) {
	    this.nowIndex=index
    }, 
  },
  mounted() {
	axios.get('/api/trade/demand/getDetail',{
		params: {
			id: this.$route.params.id
		}
	}).then(response => {
		this.DetailBuy = response.data.resp_data;
	});
	axios.get('/api/trade/demand/getList?page_size=5').then(ret => {
		this.demandList = ret.data.resp_data.data;
		this.demandloading =false
	}, function (err) {
	    this.demandloading =false;
	    this.demandStatus="error"
    });
    axios.get('/api/trade/demand',{
		params: {
			id: this.$route.params.id
		}
	}).then(response => {
		this.shopList = response.data.resp_data;
		this.shopListLoading =false
	}, function (err) {
	    this.shopListLoading =false;
	    this.shopListStatus="error"
    });
  },
  computed: {

  },
  components: {
   Tab,
   TabItem
  }
}
</script>

<style>
@import url("../../../styles/common/trade/trade-common.css");
.detail-wrapper{width:100%;background:#eee;}
.detail-wrapper .detail-img{width: 100%;height:250px;background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);border-bottom:1px solid #eee;}
.detail-wrapper .detali-ifo{padding:10px;background: #fff;}
.detail-wrapper .detali-ifo .ifo-line-one{display: flex;}
.ifo-line-one .name{flex:1;}
.ifo-line-one .name .buy-title-icon{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/main_buy_icon.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;margin-top: 3px;margin-right: 2px;}
.ifo-line-one .name .tittle{max-height:50px;line-height:25px;font-size: 18px;color: #333;}
.ifo-line-one .share{flex: 0 0 30px;width: 30px;margin-left:30px;}
.ifo-line-one .share .share-icon{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-share.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.ifo-line-one .share span{display:inline-block;color: #888;font-size: 12px;line-height:20px;margin-top:3px;}
.detail-wrapper .detali-ifo .ifo-line-two{display: flex;height:25px;padding: 5px 0;line-height: 25px;}
.ifo-line-two .price{flex: 0 0 60%;color: #ff782e;}
.ifo-line-two .price .p-bt{color: #888;}
.ifo-line-two .price big{font-size: 24px;}
.ifo-line-two .price .unit-price{font-size: 16px;}
.ifo-line-two .price .pre-date{font-size: 14px;}
.ifo-line-two .price .mianyi{font-size: 18px;}
.ifo-line-two .size{flex: 1;text-align: right;color:#ff782e;font-size: 14px;}
.ifo-line-two .size span{color:#888;}
.detail-wrapper .detali-ifo .ifo-line-three{display: flex;height:25px;line-height: 25px;font-size:14px;color: #888;}
.ifo-line-three .foods-address{flex:0 0 60%;}
.foods-address .wl{color:#29ab91;font-size: 14px;margin-left:3px;}
.foods-address .wl .wl-car{display: inline-block;width:16px;height: 14px;background:url(../../../static/trade-img/main_car.png) no-repeat center center/cover;background-size:16px 14px;vertical-align:middle;margin:0 2px;}
.ifo-line-three .stone{flex:1;text-align: right;}
.ifo-line-three .stone label{color:#ff782e;font-size: 16px;}
.detail-wrapper .detali-ifo .ifo-line-four{display: flex;height:25px;line-height: 25px;font-size:14px;color: #888;padding: 5px 0;}
.ifo-line-four .ifo-report{flex:0 0 60%;}
.ifo-line-four .ifo-report .report-icon{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-jubao.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.report-done{color:red;}
.report-done .report-icon-done{display:inline-block;width: 20px;height: 20px;background:url(../../../static/trade-img/xiangqing-jubao-done.png) no-repeat center center/cover;
background-size:20px 20px;vertical-align:top;}
.ifo-line-four .read-time{flex:1;margin-right:5px;text-align:right;}
.ifo-line-four .update-time{flex:1;text-align:right;}
.detail-wrapper .detali-foods-seller{padding:10px;height:50px;background: #fff;margin: 10px 0;display: flex;line-height:50px;}
.detali-foods-seller .seller-icon{flex: 0 0 50px;width: 50px;height: 50px;margin-right: 10px;background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);border-radius: 50%;}
.detali-foods-seller .seller-msg{flex: 1;overflow: hidden;}
.detali-foods-seller .seller-msg .name{display: inline-block;max-width:150px;vertical-align: middle;font-size: 16px;color: #333;}
.detali-foods-seller .seller-shop{flex:0 0 70px;width:70px;margin-left: 10px;text-align: right; color: #888; font-size: 14px;}
.detali-foods-seller .seller-shop a{color: #888;}
.seller-shop .enter-icon{display:inline-block;width: 10px;height: 18px;background:url(../../../static/trade-img/more_icon.png) no-repeat center center/cover;
background-size:10px 18px;vertical-align:top;margin-top: 15px;}
.tab-item{background: #fff;}
.vux-tab .vux-tab-item{font-size: 16px !important;}
.vux-tab .vux-tab-item.vux-tab-selected{color: #008cf0 !important;}
.vux-tab-ink-bar{background-color: #008cf0 !important;}
.details-msg{padding:0 10px;background: #fff;}
.details-msg .main-wapper{display: flex;padding:10px;line-height:25px; font-size: 14px;}
.main-wapper .msg-left{flex: 0 0 80px;color: #888;}
.main-wapper .msg-right{flex:1;margin-left:15px;color: #333;}
.main-wapper .msg-right .need-bq{display: inline-block;color:#008cf0;border:1px solid #008cf0;
font-size:10px; padding: 0 8px;margin-right:5px; line-height:20px;border-radius:10px;vertical-align:center;background:rgba(0,140,240,0.1);}
.detail-list-remand{padding:10px 0;}
.detail-list-remand .column{height:30px;line-height:26px;padding:0 10px;}
.detail-list-remand .column .column-icon{display:inline-block;width:22px;height:22px;background:url(../../../static/trade-img/detail-recommend.png) no-repeat center center/cover;
background-size:22px 22px;vertical-align:top;margin-top:3px;margin-right:2px;}
.detail-list-remand .column span{font-size: 16px;color: #333;}
</style>
